<template>
	<view class="main-box" :style="{'height': `calc(100vh - 100rpx - ${safeBottom}px)`}">
		<swiper class="index-swiper-box" :indicator-dots="false" :current="type" disable-touch="true" :duration="0">
			<swiper-item>
				<home></home>
			</swiper-item>
			<swiper-item>
				<social></social>
			</swiper-item>
			<swiper-item>
				<message></message>
			</swiper-item>
			<swiper-item>
				<mine></mine>
			</swiper-item>
		</swiper>
		<bottom-bar></bottom-bar>
		<uni-popup ref="bottomPopup" :is-mask-click="false" type="bottom" :safe-area="true" mask-background-color="rgba(0,0,0,0.85)">
			<release-control @close="closeRelease()"></release-control>
		</uni-popup>
	</view>
</template>

<script>
	import bottomBar from '../components/bottomBar.vue'
	import home from '../components/home.vue'
	import social from '../components/social.vue'
	import message from '../components/message.vue'
	import mine from '../components/mine.vue'
	import releaseControl from '../components/releaseControl.vue'
	
	export default {
		components: {
			bottomBar,
			home,
			social,
			message,
			mine,
			releaseControl
		},
		data() {
			return {
				safeBottom: 0,
				safeTop: 0,
				type: 0
			};
		},
		onLoad() {
			
		},
		methods: {
			changeType(type) {
				this.type = type;
			},
			jumpTo(path) {
				uni.navigateTo({
					url: `/pages/${path}`
				})
			},
			showRelease() {
				this.$refs.bottomPopup.open();
			},
			closeRelease() {
				this.$refs.bottomPopup.close();
			}
		}
	}
</script>

<style lang="scss">
	.main-box {
		width: 100vw;
		// height: 100vh;
		background-color: white;
		overflow: hidden;
		
		.index-swiper-box {
			width: 100%;
			height: 100%;
		}
	}
</style>
